<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
     选择器的优先级:
     1) 如果属性不同, 则样式叠加
     2) 如果属性相同, 则有优先级
       如果优先级别相同, 则就近
     !important > id选择器 > 类选择器 > 标签选择器 > * > 继承
    */
    /*  全局选择器 */
    * {
      color: green;
      font-size: 20px;
    }


    #main {
      color: blue;
    }

    div {
      color: red !important;
    }

    .box2 {
      color: purple;
    }

    .box1 {
      color: pink;
    }
  </style>
</head>

<body>
  <div id="main" class="box1 box2">今天天气很好</div>
  <p>我是段落</p>
  <span>我是span标签</span>
</body>

</html>